// 呼叫端
import "./peer.css";
import { defineComponent, ref,computed} from "vue";
import dxPeer from "../../store/dxPeer";
export default defineComponent({
  props: {
    code: {
      type: String,
    },
  },
  setup(props) {
    let isload = false;
    const switchOn = () => {
      dxPeer.commit("switchOn");
    };
    const CancelOn = () => {
      dxPeer.commit("CancelOn");
    };
    const msg = computed(()=>{
      return dxPeer.state.msg
    })
    const qiehuna = ref(false)
    return () => (
      <>
        <div class={"static" + dxPeer.state.TheActive}>
          <div class={qiehuna.value?'TheVideoFrame act':'TheVideoFrame'} >
           
            <video
              class="video-class"
              id="CallingSideVideo"
              muted
              autoplay
              onClick={()=>{qiehuna.value=true}}
            ></video>
            <video class="video-class" id="receivingEndVideo" autoplay onClick={()=>{qiehuna.value=false}}></video>
            {isload ? (
              <div class="In-the-answer-w vertical-center">
                <div class="In-the-answer cf">
                  <n-spin size="small" stroke="#fff" />
                  <span>{dxPeer.state.TheActive==3?'通话中':'视频接听中'}...</span>
                </div>
              </div>
            ) : (
              ""
            )}

            <img
              class="In-the-answer-bg"
              src={msg.value.headPortrait}
            ></img>

            <div class="Answering-hanging-up display-flex cen">
              <div class="flex-1 vertical-center">
                <span
                  class="operating-button vertical-center"
                  onClick={CancelOn}
                >
                  {dxPeer.state.hangUpload ? (
                    <n-spin size="small" stroke="#fff" />
                  ) : (
                    <i class="iconfont dx-guaduan cf fz40"></i>
                  )}
                </span>
              </div>
              <div class="flex-1 vertical-center">
                <span
                  class="operating-button ab vertical-center"
                  onClick={switchOn}
                >
                  <i class="iconfont dx-jieting cf fz40"></i>
                </span>
              </div>
            </div>

            <div class="pr userinfo-page">
              <div class="display-flex">
                <img class="user-icon-sp" src={msg.value.headPortrait} />
                <div class="flex-1 pl10">
                  <p class="cf fz20">{msg.value.fromName}</p>
                  <p class="cf fz12">{dxPeer.state.TheActive==3?'通话中':'视频接听中'}...</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  },
});
